<template>
    <a-form>
        <a-row :gutter="24">
            <a-col :span="4">
                <a-form-item label="名称">
                    <a-input allowClear v-model:value.trim="searchData.name"></a-input>
                </a-form-item>
            </a-col>
            <a-col :offset="14" :span="6" style="text-align: right">
                <a-space>
                    <a-button type="default" @click="refresh">查询</a-button>
                    <a-button type="primary" @click="() => {
                        visibleSaveModal = true;
                        saveformdata = {
                            properties: [],
                            userClaims: [],
                            enabled: true,
                            required: true,
                            emphasize: true,
                            showInDiscoveryDocument: true,
                            nonEditable: true,
                        };
                    }">新增</a-button>
                    <a-popconfirm v-if="delsBtnShow" title="确认删除?" ok-text="是" cancel-text="否" @confirm="delsHandle">
                        <a-button type="primary" danger :loading="delsLoading">删除</a-button>
                    </a-popconfirm>
                </a-space>
            </a-col>
        </a-row>
    </a-form>

    <a-table row-key="id" :rowSelection="rowSelection" :columns="columns" :data-source="dataSource" default-expand-all-rows
        :pagination="pagination" :loading="loading">
        <template #bodyCell="{ column, text, record }">
            <template v-if="column.dataIndex === 'created'">
                <small> <plus-square-two-tone /> {{ dayjs(record.created).format("YYYY-MM-DD HH:mm:ss") }} </small>
                <br />
                <small v-if="record.updated != null">
                    <edit-two-tone /> {{ dayjs(record.updated).format("YYYY-MM-DD HH:mm:ss") }}
                </small>

            </template>
            <template v-if="column.dataIndex === 'action'">
                <a-space>
                    <a-button type="primary" size="small"
                        @click="() => { visibleSaveModal = true; Object.assign(saveformdata, record); }">
                        编辑
                    </a-button>

                    <a-popconfirm title="确认删除?" ok-text="是" cancel-text="否" @confirm="delHandle([record.id])">
                        <a-button type="primary" size="small" danger :loading="delLoading">删除
                        </a-button>
                    </a-popconfirm>
                </a-space>
            </template>
        </template>
    </a-table>

    <SaveModal v-model="visibleSaveModal" :formdata="saveformdata" @success="refresh" />
</template>


<script setup lang="ts">
import { pageRequest, useRequest } from "@/lib/net"
import { message } from "ant-design-vue";
import type { TableProps } from "ant-design-vue/es/table/Table"
import type { Key } from "ant-design-vue/lib/table/interface"
import SaveModal from "./Save.vue"
import dayjs from 'dayjs'
import type { ComputedRef } from "vue";
import idResource from "@/api/idResource";
import type { IdResourceSearch, IdResourceItem } from "@/api/idResource";

import { PlusSquareTwoTone, EditTwoTone } from '@ant-design/icons-vue';

const columns = [
    {
        title: '编号',
        dataIndex: 'id',
        width: '150',
    },
    {
        title: '名称',
        dataIndex: 'name',
        width: '100',
    },
    {
        title: '显示名称',
        dataIndex: 'displayName',
        width: '100',
    },
    {
        title: '说明',
        dataIndex: 'description',
        width: '100',
    },
    {
        title: '时间',
        dataIndex: 'created',
        width: '200',
    },
    {
        title: '操作',
        dataIndex: 'action',
        width: '200',
    }
];

const visibleSaveModal = ref(false);
const saveformdata = ref<IdResourceItem>({})

// 多选
const delsBtnShow = ref(false)
const selectedRowKeys = ref<number[]>()
const rowSelection: ComputedRef<TableProps['rowSelection']> = computed(() => {
    return {
        onChange: (ids: Key[], rows: any[]) => {
            selectedRowKeys.value = ids as number[]
            delsBtnShow.value = ids.length > 0
        }
    }
});

// 分页列表
const searchData = reactive<IdResourceSearch>({ page: 1, pageSize: 10 })
const {
    reload,
    refresh,
    loading,
    dataSource,
    pagination
} = pageRequest(() => {
    return idResource.page(searchData)
});


// 删除单条
const { run: delHandle, loading: delLoading } = useRequest(idResource.delete, {
    manual: true,
    onSuccess: (data) => {
        if (data.code != 0) {
            message.error(data.message)
            return
        }
        refresh()
        message.success(data.message)
    }
});

// 删除多条
const remove = () => idResource.delete(selectedRowKeys.value as number[])
const { run: delsHandle, loading: delsLoading } = useRequest(remove, {
    manual: true,
    onSuccess: (data) => {
        if (data.code != 0) {
            message.error(data.message)
            return
        }
        refresh()
        message.success(data.message)
    }
});
</script>
../../../../api/idResource../../../../api/idResource